<template>
  <div class="container">
    <div
      class="icon"
      @click="() => (showSearchType = !showSearchType)"
      :url="searchType.url"
    />

    <input
      type="text"
      placeholder="搜索"
      v-model="question"
      @keyup.enter.native="searchEvent"
    />

    <ul v-show="showSearchType">
      <li v-for="item in searchTypes" @click="searchTypeClick(item)">
        <img :src="item.iconPath" />
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { getStaticResourcePath } from '@/utils/common'
import { inject, ref } from 'vue'
const iconPath = getStaticResourcePath('./../../../images/bing.webp')
let bgPath = ref(`url(${iconPath})`)

const question = ref('')

const searchType = {
  name: 'bing',
  url: `https://cn.bing.com/search?q=`,
  iconPath: bgPath,
}
const searchTypes = [
  {
    name: 'bing',
    url: `https://cn.bing.com/search?q=`,
    iconPath: 'bing',
  },
  {
    name: 'google',
    url: `https://www.google.com/search?q=`,
    iconPath: 'google',
  },
  {
    name: 'baidu',
    url: `https://www.baidu.com/s?tn=44004473_8_oem_dg&ie=utf-8&wd=`,
    iconPath: 'baidu',
  },
  {
    name: 'add',
    url: ``,
    iconPath: 'add',
  },
]
for (let item of searchTypes) {
  item.iconPath = getStaticResourcePath(
    `./../../../images/${item.iconPath}.webp`,
  )
}

const searchEvent = () => {
  const url = `${searchType.url}${question.value}`
  window.open(url, '_blank')
}

let showSearchType = inject('showSearchType')
const searchTypeClick = (item) => {
  if (item.name != 'add') {
    bgPath.value = `url(${item.iconPath})`
    searchType.url = item.url
    showSearchType.value = false
  }
}
</script>

<style scoped lang="less">
.container {
  position: relative;

  .icon {
    position: absolute;
    display: block;
    background-image: v-bind(bgPath);
    background-size: cover;
    width: 15px;
    height: 15px;
    top: 2px;
    left: 2px;
  }
  .icon:hover {
    background-color: white;
    box-shadow: 2px 2px 2px gray;
    border-radius: 2px;
  }
  input {
    width: 100%;
    height: 15px;
    background-color: #acadb1;
    border: 0;
    padding: 2px 10px 2px 20px;
    border-radius: 5px;
  }

  ul {
    display: flex;
    width: 100%;
    margin-top: 5px;
    flex-direction: row;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 5px;
    border-radius: 5px;
    li {
      background-size: cover;
      background-color: white;
      margin-left: 10px;
      border-radius: 3px;
      img {
        display: inline-block;
        width: 10px;
        height: 10px;
        padding: 5px;
      }
    }
  }
}
input:focus {
  outline: none;
  background-color: #eeeaea;
}
</style>
